<template>
	<div class="active">
		<div class="fixed">
			<div class="title flex">
				<div class="title_left">
					<img @click="back" src="../assets/image/return.png"/>
				</div>
				<div class="add">
					我的邀请码
				</div>
				<div>
				</div>
			</div>

		</div>
		<div class="lists">
             <div class="code flex">
             	<div class="code_img">
             		<img :src="code"/>
             	</div>
             </div>
             <div class="code_num flex">
             	邀请码：{{code_ma}}
             </div>
             
			</div>
			
			<div class="address flex">
				<div>邀请注册地址</div>
				<div class="inps" >
					<input id="foo" type="text" placeholder="请输入内容" disabled="disabled" v-model="address"/>
				<div class="copy flex"  @click="copy" data-clipboard-action="copy">
					<img src="../assets/image/copy_address.png"/> <span>复制地址</span>
				</div>
				</div>
				
			</div>
		</div>

	</div>

</template>

<script>
		import Clipboard from 'clipboard';
	export default {
		data() {
			return {
				
				skip_url:"http://"+window.location.host+"/#/register",
				code:'',
				code_ma:"",
				address:"",
			}
		},
		//在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
		created: function() {

		},
		methods: {
			back() {
				this.$router.go(-1)
			},
		
			skipto_register() {
				this.$router.push({
					path: '/register'
				});
			},
			skipto_code(){
				this.$router.push({
					path: '/code'
				});
			},
			//复制当前链接地址
			 copy() {
				var that = this
				let clipboard = new Clipboard('.copy', {
					text: function() {
						return that.address
					}
				})
				clipboard.on('success', e => {
					this.$message({
						message: '复制成功',
						showClose: true,
						type: 'success'
					})
					// 释放内存
					clipboard.destroy()
				})
				clipboard.on('error', e => {
					this.$message({
						message: '复制失败,',
						showClose: true,
						type: 'error'
					})
					clipboard.destroy()
				})

				   
			},
		},
		mounted() {
             var _this = this;
			var datas = {
				url:_this.skip_url,
				store_id: localStorage.getItem("store_id"),
				"key":localStorage.getItem("key")
			}
			var qs = require('qs');
			_this.$http.post(_this.baseURL + '/index.php/waveguest/Storemy/store_invite_code', qs.stringify(datas)).then(response => {
				console.log(response)
				_this.code = response.data.data.store_invite_qrcode;
				_this.code_ma=response.data.data.store_invite_code;
				_this.address=_this.skip_url+"?"+_this.code_ma;
			}).catch(error => {

			});
			
			
		},
	}
</script>

<style>
.el-message {
		min-width: 4rem;
		top: 40% !important;
	}
	
</style>
<style scoped="scoped">
	.active {
		
		position: fixed;
		top: 0;
		width: 100%;
		max-width: 640px;
		height: 100%;
		background: #007AFF;
		background: url(../assets/image/code_bg.png);
		background-size: 100%;
	}
	.title_left {
		width: 0.67391rem;
		height: 0.67391rem;
	}
	
	.lists {
		margin: 2rem ;
		height: 15rem;
		background: url(../assets/image/code_bai.png) no-repeat;
		background-size: 100%;

	}
.title_left>img {
		width: 0.67391rem;
		height: 0.67391rem;
	}
	
	.title {
		width: 90%;
		padding: 0 5% 0 5%;
		height: 2rem;
		font-size: 0.7193rem;
		background: white;
		align-items: center;
	}
	
	.title div {
		width: calc(100%/3);
		align-items: center;
	}
	
	.title>div:nth-child(2) {
		text-align: center;
	}
	
	.inp{
		padding-top: 2rem ;
	}
	.inp>p{
		color: #D1D5D8;
		font-size: 0.2517rem;
		padding-bottom: 0.5rem;
	}
	.inp>input{
		width: 100%;
		height: 1.5rem;
		border: none;
		border-bottom: 1px solid gray; 
		font-size: 0.65217rem;
	}
	.btns{
		width: 100%;
		height: 2.1913rem;
		background:#007AFF;
		border-radius: 0.47826rem;
		text-align: center;
		line-height: 2.3913rem;
		color: white;
		font-size: 0.7826rem;
		margin-top: 6rem;
	}
	.top{
		    font-size: 0.91304rem;
	}
   .code{
   	width: 100%;
   	height: 12.2608rem;
   	justify-content: center;
   	align-items: center;
   
   }
   .code_img{
   		width: 7.2608rem;
   		height: 7.2608rem;
   		
   }
    .code_img>img{
   		width: 100%;
   		height: 100%;
   }
	.code_num{
		width: 100%;
		height: 2rem;
		margin-top: 0.5rem;
		font-size: 0.6956rem;
		justify-content: center;
		align-items: center;
	}
	.address{
		width: 90%;
		margin-left: 5%;
		height: 3rem;
		flex-direction: column;
	}
	.address>div:nth-child(1){
		font-size: 0.5217rem;
		color: white;
		padding-left: 1rem;
	}
	.inps{
		width: 100%;
		position: relative;
		height: 1.6304rem;
		padding-top: 0.3rem;
		
	}
	.inps>input{
		width: 8rem;
		padding-left: 2rem;
		padding-right: 4rem;
		height: 1.6304rem;
		background: white;
		border-radius: 0.82608rem;
		border: none;
	}
	.copy{
		position: absolute;
right: 1.3rem;
top: 0.8rem;
font-size: 0.565217rem;
color: #007AFF;
align-items: center;
	}
	.copy>img{
		width: 0.54347rem;
		height: 0.54347rem;
	}
	
</style>